.loading {
    width: 80px;
    height: 60px;
    margin: 0 auto;
    position: relative;
    span {
        width: 4px;
        height: 20px;
        background-color: #ccc;
        position: absolute;
        left: 38px;
        -webkit-animation: loading 1s infinite;
    }
}

.line1 {
    background-color: #000;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-delay: .3s;
}
.line2 {
    top: 5px;
    left: 52px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation-delay: .4s;
}
.line3 {
    top: 18px;
    left: 57px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation-delay: .5s;
}
.line4 {
    top: 31px;
    left: 52px;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
    -webkit-animation-delay: .6s;
}
.line5 {
    top: 37px;
    -webkit-animation-delay: .7s;
}
.line6 {
    top: 32px;
    left: 24px;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
    -webkit-animation-delay: .8s;
}
.line7 {
    top: 18px;
    left: 19px;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-animation-delay: .9s;
}
.line8 {
    top: 5px;
    left: 24px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-animation-delay: 1s;
}
@-webkit-keyframes loading {
    0% {
        background-color: #ccc;
    }
    50% {
        background-color: #000;
    }
    100% {
        background-color: #ccc;
    }
}